<template>
  <div>
    <div class="header">
      <span @click="handleBack"> <van-icon name="arrow-left" /></span>
      <div class="search">
        <span class="iconfont iconsearch"></span>
        <input
          placeholder="请输入搜索关键词"
          v-model="keyword"
          @keyup.enter="handleSearch"
        />
      </div>
      <div class="btnSearch" @click="handleSearch">搜索</div>
    </div>
    <div class="history" v-if="postList.length == 0">
      <h4>历史记录</h4>
      <div class="list">
        <div
          class="item"
          v-for="item in history"
          :key="item.id"
          @click="historySearch(item)"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <div class="hot">
      <h4>热门搜索</h4>
      <div class="list">
        <div class="item">办公室小野否认解散</div>
        <div class="item">办公室小野否认解散</div>
        <div class="item">办公室小野否认解散</div>
      </div>
    </div>
    <div class="result">
      <PostItem v-for="post in postList" :key="post.id" :postData="post" />
    </div>
  </div>
</template>

<script>
import PostItem from "../components/PostItem";
export default {
  data() {
    return {
      keyword: "",
      postList: [],
      history: [],
    };
  },
  components: {
    PostItem,
  },
  created() {
    //每当进入页面时,history总是空的
    //如果发现本地存储有搜索记录就应该还原回来
    if (localStorage.getItem("history")) {
      this.history = JSON.parse(localStorage.getItem("history"));
    }
  },
  watch: {
    keyword(newVal) {
      if (!newVal) {
        this.postList = [];
      }
    },
    history() {
      // 为了避免刷新清空历史记录
      // 每次历史记录发生变化,
      // 都在本地储存做备份
      localStorage.setItem("history", JSON.stringify(this.history));
    },
  },
  methods: {
    handleSearch() {
      console.log("被点击了");
      this.$axios({
        url: "/post_search",
        params: {
          keyword: this.keyword,
        },
      }).then((res) => {
        console.log(res.data);
        this.postList = res.data.data;
        // 现在我们有搜索的记录了,
        // 每当搜索的时候, 都可以记录在 this.history
        if (this.history.indexOf(this.keyword) == -1) {
          this.history.unshift(this.keyword);
        }
      });
    },
    historySearch(keyword) {
      this.keyword = this.keyword;
      this.handleSearch();
    },
    handleBack() {
      // 如果当前结果列表有数据
      // 应该只是清空搜索关键字,
      // 重新显示搜索建议
      if (this.postList.length > 0) {
        this.keyword = "";
      } else {
        this.$router.back();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  display: flex;
  padding: 20/360 * 100vw;

  align-items: center;
  .search {
    display: flex;
    flex: 1;
    border-radius: 15/360 * 100vw;
    border: 1px solid #ccc;
    height: 35/360 * 100vw;

    padding-left: 10/360 * 100vw;
    margin: 0 10/360 * 100vw;
    box-sizing: border-box;
    align-items: center;
    input {
      width: 90%;
      outline: none;
      border: 0;
    }
  }
}
.history {
  h4 {
    padding: 0 16/360 * 100vw;
  }
  .list {
    display: flex;
    margin: 10/360 * 100vw;
    padding-bottom: 15/360 * 100vw;
    border-bottom: 1px solid #d7d7d7;
    flex-wrap: wrap;
    .item {
      color: #333333;
      margin: 6/360 * 100vw;
      font-size: 14/360 * 100vw;
    }
  }
}
.hot {
  h4 {
    padding: 0 16/360 * 100vw;
  }
  .list {
    display: flex;
    margin: 10/360 * 100vw;
    padding-bottom: 15/360 * 100vw;
    padding-right: 40/360 * 100vw;

    flex-wrap: wrap;
    justify-content: space-between;
    .item {
      color: #333333;

      margin: 6/360 * 100vw;
      font-size: 14/360 * 100vw;
    }
  }
}
</style>